<template>
  <div class="common-pd-page">
    <ModuleTitle :title-text="'简历上传详情'"></ModuleTitle>
    <div class="upload-box" v-if="isShowResumeUploadBtn">
      <el-row :class="'btn-box'">
        <el-col :span="18" :class="'upload-btn-box'">
          <el-button
            type="primary"
            class="add-upload-btn"
            @click="showResumeUploadForm"
          >
            <span class="iconfont icon-jia add-upload-icon"></span>
            <span class="upload-btn-txt"> 简历上传</span>
          </el-button>
        </el-col>
        <el-col :span="6" :class="'save-btn-box'">
          <el-button
            class="save-md-btn"
            :disabled="isCan"
            v-show="isShowResumeForm"
            @click="savedResumeInfo('formData')"
            >提交</el-button
          >
        </el-col>
      </el-row>
      <div v-show="isShowResumeForm">
        <el-row :class="'upload-info-box'">
          <el-row :class="'upload-mode-title'">
            <el-col :span="12" :class="'resume-detailtitle-box'">
              <span class="iconfont icon-document title-icon"></span>
              <span class="title-txt">简历概要</span>
            </el-col>
            <el-col :span="12" :class="'feture-box'">
              <!-- <span class="fetu-item fetu-upload" @click="selectFile">
                  <span class="iconfont fetu-icon">&#xe686;</span>
                  <span class="fetu-txt">简历上传</span>
                </span> -->
              <span class="fetu-item fetu-del" @click="delResumeInfo">
                <span class="iconfont icon-delete fetu-icon"></span>
                <span class="fetu-txt">删除</span>
              </span>
            </el-col>
          </el-row>
          <el-form
            :inline="true"
            :label-position="'right'"
            ref="formData"
            :rules="checkForm"
            :label-width="'140px'"
            :model="formData"
            class="form-box upload-form-box"
          >
            <span class="sub-form-items">候选人信息</span>
            <el-col :span="8">
              <el-form-item label="候选人名字：" prop="candidate">
                <el-input
                  clearable
                  v-model="formData.candidate"
                  :maxlength="8"
                  placeholder="请输入候选人名字"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学历：" prop="educational">
                <el-select
                  v-model="formData.educational"
                  :clearable="true"
                  placeholder="请选择学历"
                >
                  <el-option
                    v-for="item in educatInfo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="工作经验(年)：" prop="handsOn">
                <el-input
                  clearable
                  v-model="formData.handsOn"
                  :maxlength="2"
                  placeholder="请输入工作经验"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="在离职状态：" prop="jobStatus">
                <el-select
                  v-model="formData.jobStatus"
                  :clearable="true"
                  placeholder="请选择在离职状态"
                >
                  <el-option
                    v-for="item in curstaInfo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="最快到岗时间：" prop="inJboTime">
                <el-date-picker
                  v-model="formData.inJboTime"
                  :picker-options="pickerOptions"
                  type="date"
                  placeholder="选择日期到岗时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="候选人电话：" prop="candidatePhone">
                <el-input
                  clearable
                  v-model.number="formData.candidatePhone"
                  :maxlength="15"
                  placeholder="请输入候选人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作城市：" prop="city">
                <el-input
                  clearable
                  v-model="formData.city"
                  :disabled="true"
                  @focus="showAllCityBox"
                  placeholder="请选择工作城市"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="推荐理由："
                :class="'inp-textarea'"
                prop="reason"
              >
                <el-input
                  clearable
                  type="text"
                  v-model="formData.reason"
                  auto-complete="off"
                  :maxlength="300"
                  placeholder="请输入推荐理由"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :class="'star-box'">
              <el-form-item label="简历上传/pdf：">
                <!-- /didiopms_sup/cvdbSupplier/doUploading.do -->
                <el-upload
                  :class="'resume-uplaod-box'"
                  :file-list="fileList"
                  :before-upload="beforeAvatarUpload"
                  :action="fUrl"
                  name="recfile"
                  list-type="picture-card"
                  :headers="headerObj"
                  :on-preview="handlePictureCardPreview"
                  :on-error="uploadError"
                  :on-exceed="handleExceed"
                  :limit="1"
                  :http-request="doUpload"
                  :on-success="uploadSuccess"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <span class="sub-form-items">上传人信息</span>
              <el-col :span="8">
                <el-form-item label="上传人姓名：" prop="uploadName">
                  <el-input
                    clearable
                    v-model="formData.uploadName"
                    :maxlength="8"
                    placeholder="请输入上传人姓名"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上传人电话：" prop="uploadPhone">
                  <el-input
                    clearable
                    v-model="formData.uploadPhone"
                    :maxlength="15"
                    placeholder="请输入上传人电话"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上传人邮箱：" prop="uploadEmail">
                  <el-input
                    clearable
                    v-model="formData.uploadEmail"
                    :maxlength="28"
                    placeholder="请输入上传人邮箱"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </div>
    <el-row :class="'end-upload-list'" v-if="isShowUploadResume">
      <ModuleTitle
        :title-text="'已上传简历'"
        :showBorBottom="false"
        :showIcon="false"
        :showMarBottom="false"
      ></ModuleTitle>
      <el-table
        :data="endUploadList"
        align="center"
        border
        style="width: 100%"
        :class="'table-box'"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="record" label="学历"> </el-table-column>
        <el-table-column prop="workLife" label="工作年限"> </el-table-column>
        <el-table-column prop="jobStatus" label="在离职状态"> </el-table-column>
        <el-table-column prop="inJobTime" label="最快到岗时间">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话"> </el-table-column>
        <el-table-column prop="uploadTime" label="上传时间"> </el-table-column>
        <el-table-column prop="address" label="操作" :class="'operate-col'">
          <template slot-scope="scope">
            <span class="look-resume resume-txt">
              <span
                class="iconfont icon-chakan look-icon"
                @click="showPDFImgDialog(scope.row, 'show', '1', 'pdf')"
              ></span>
            </span>
            <span
              class="down-resume resume-txt"
              @click="downloadFile(scope.row)"
            >
              <span class="iconfont icon-xiazai2 down-icon"></span>
            </span>
            <div class="down-box" v-show="false">
              <a
                class="down-btn"
                ref="downBtn"
                :href="downUrl"
                :download="downFileName"
              ></a>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- <ModuleTitle :title-text="'需求详情'" :showIcon="false" :selfColor="'#636363'" :showBorBottom="false" :showMarBottom="false"></ModuleTitle> -->
    <DemandDetail :text-datas="demanDetailInfo"></DemandDetail>
    <PreviewPdfOrImage></PreviewPdfOrImage>
    <publiced-city></publiced-city>
  </div>
</template>
<script>
import bus from "./../eventBus";
import { mapGetters, mapState } from "vuex";
import { formatDate } from "./../utils/dateFormat";
import LocalStore from "store";
import ModuleTitle from "./../components/ModuleTitle";
import DemandDetail from "./../components/DemandDetail";
import PreviewPdfOrImage from "./../components/PreviewPDFOrImage";
import Verify from "./../utils/checkInpu";
import { isFileName } from "./../assets/js/reg";
import { getMonthAllDays } from "./../utils/dateFormat";
import PublicedCity from "./../components/puliceCity";
import { dec_demandDetail } from "./../decs/dec_interviewDemandDetail";
import { showOrDownFile } from "./../assets/js/preOrDownFile";
import { downloadFile, removeFile, doUploading } from "../fetch/modules/common";
//import DAlert from './../mixins/DAlert'
function fetchEducatInfo(store, opts) {
  return store.dispatch("FETCH_MAP_DATA_TEMP", opts);
}
function fetchCurStaInfo(store, opts) {
  return store.dispatch("FETCH_MAP_DATA", opts);
}
function fetchResumeDetailInfo(store, opts) {
  return store.dispatch("FETCH_RESUME_DETAIL_INFO", opts);
}
function fetchSaveResumeInfo(store, opts) {
  return store.dispatch("FETCH_SAVE_RESUME_INFO", opts);
}
function delResumeDetailInfo(store, opts) {
  return store.dispatch("DEL_RESUME_DETAIL", opts);
}
export default {
  components: {
    ModuleTitle,
    DemandDetail,
    PreviewPdfOrImage,
    PublicedCity,
  },
  // mixins: [DAlert],
  data() {
    return {
      imgUrl: '',
      demanDetailInfo: {
        postCode: "", // 岗位名称
        postType: "", // 岗位分类
        salaryRange: "", // 预算范围
        costType: "", //费用分类
        needsNumber: "", // 需求数量
        projectedDeadlines: "", // 预计工作期限
        supplierName: "", // 供应商名称
        workLife: "", // 工作年限
        workingPlace: "", // 工作地点
        positionInformation: "", // 岗位说明
        requirements: "", // 任职要求
        employeeName: "", // 直属上级
        beginTime: "", // 入场时间
      },
      downUrl: "",
      downFileName: "",
      formData: {
        candidate: "", // 候选人名称
        educational: "", // 学历
        uploadName: "", // 上传人姓名
        handsOn: "", // 工作经验
        jobStatus: "", // 在离职状态
        uploadPhone: "", // 上传人电话
        availableTime: "", // 到岗时间
        inJboTime: "", //
        reason: "", // 推荐理由
        uploadEmail: "", // 上传人邮箱
        candidatePhone: "", // 候选人电话
        uploadFileUrl: "", //上传文件存放的路径
        city: "", //工作城市
        cityCode: "", // 工作城市编码
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      headerObj: {
        "Access-Token": LocalStore.get("token"),
      },
      checkForm: {
        candidate: [
          {
            validator: Verify.nonEmpty,
            message: "请输入候选人名字",
            required: true,
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            validator: Verify.nonEmpty,
            message: "请选择城市",
            tirgger: "blur",
          },
        ],
        uploadName: [
          {
            validator: Verify.nonEmpty,
            message: "请输入上传人名字",
            required: true,
            trigger: "blur",
          },
        ],
        reason: [
          {
            validator: Verify.nonEmpty,
            message: "请输入推荐理由",
            required: true,
            trigger: "blur",
          },
        ],
        uploadPhone: [
          { validator: Verify.phone, required: true, trigger: "blur" },
        ],
        candidatePhone: [
          { validator: Verify.phone, required: true, trigger: "blur" },
        ],
        uploadEmail: [
          { validator: Verify.email, required: true, trigger: "blur" },
        ],
        handsOn: [
          { validator: Verify.checkNumber, required: true, trigger: "blur" },
        ],
        educational: [
          { required: true, message: "请选择学历", trigger: "change" },
        ],
        inJboTime: [
          {
            required: true,
            type: "date",
            message: "请选择到岗时间",
            trigger: "change",
          },
        ],
        jobStatus: [
          { required: true, message: "请选择在离职状态", trigger: "change" },
        ],
      },
      endUploadList: [],
      fileList: [],
      inJboTime: "",
      prssWidth: "0",
      fileObj: {
        size: "",
        name: "",
      },
      isShowResumeUploadBtn: false,
      needId: "",
      state: "",
      educatInfo: [], // 学历
      curstaInfo: [], // 在离职状态
      isShowUploadFileBox: false,
      uploadFileState: true,
      isShowNameBox: true, // 上传文件名称
      isShowPropessBox: false, // 上传文件进度条
      isShowUploadStateBox: false, // 上传文件状态
      isShowUploadResume: false, // 是否显示已上传的列表
      isShowResumeForm: false, // 是否显示简历概要表单
      uploadFileStateText: "",
      uploadFileStateClass: "",
      parentId: "educat",
      curSta: "curSta",
      uploadedInfo: [],
      isCan: false,
      isClosed: true,
      fUrl: FILE_URL + "/cvdbSupplier/doUploading.do",
      needsUpdater: "", // 需求接收人
    };
  },
  computed: {
    ...mapGetters(["getSelectMapData", "getSelectMapDataTemp"]),
    ...mapState(["mapData", "mapTempData"]),
  },
  beforeMount() {
    let id = this.$route.params.id;
    this.needId = id;
    this.state = this.$route.query.stus;
    let self = this;
    if (this.state === "1") {
      this.isShowUploadResume = false;
    } else {
      if (this.state === "6") {
        this.isClosed = false;
      } else {
        this.isClosed = true;
      }
      this.isShowUploadResume = true;
    }

    fetchCurStaInfo(this.$store, { parentId: this.curSta }).then(() => {
      let tempObj = this.getSelectMapData;
      if (tempObj.state === "0000") {
        let tempData = this.mapData.data;
        let len = tempData.length;
        let tempItem = {};
        let endTempItem = {};
        this.curstaInfo = [];
        for (let i = 0; i < len; i++) {
          tempItem = tempData[i];
          endTempItem = {
            label: tempItem.lable,
            value: tempItem.coded,
          };
          this.curstaInfo.push(endTempItem);
        }
      }
    });

    this.getDemandDetail();
  },
  mounted() {
    bus.$on("down-file", this.downFile);
    bus.$on("submit-city-data", this.getCityName);
  },
  methods: {
    doUpload(files) {
      console.log(files.file)
      const file = files.file
      const data = new FormData()
      data.append('recfile', file)

      doUploading(data).then(res => {
        const data = res.data
        console.log(data)
        if (data) {
          this.formData.uploadFileUrl = res.data;
          this.fileList.push({
            url: require('../assets/images/pdf.png'),
            realUrl: data.data,
          })
        }
      })
    },
    downloadFile(row) {
      // console.log(row)
      downloadFile(row.zz).then((res) => {
        const link = document.createElement("a");
        const blob = new window.Blob([res.data], {
          type: "application/pdf;charset=UTF-8",
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = `${row.name}.pdf`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        // URL.revokeObjectURL(link.href)
      });
    },
    getDemandDetail() {
      fetchResumeDetailInfo(this.$store, { needsId: this.needId }).then(() => {
        console.log(this.$store);
        let tempObj = this.$store.getters.getResumeDetailInfo;
        if (tempObj.state === "0000") {
          let tempData = tempObj.data,
            tempUploadInfos = tempData.cvdbUploadInfo,
            tempDetailInfo = tempData.needsDetails,
            tempUploadPeopleInfo = tempData.uploadInfo,
            depts = tempData.depts,
            tempDerts = [];

          // 需求详情数据解构
          this.demanDetailInfo = dec_demandDetail(
            tempDetailInfo,
            "",
            this.isShowGetDemandedBtn,
            null,
            depts
          );

          this.formData.city = tempDetailInfo.workingCity; // 简历上传填写工作城市
          this.formData.cityCode = tempDetailInfo.cityCode; // 简历上传填写工作城市code
          if (tempDetailInfo.state === 6) {
            // 需求已关闭
            this.isShowResumeUploadBtn = false;
            this.demanDetailInfo.isCloseDetail = true;
          } else {
            this.isShowResumeUploadBtn = true;
            this.demanDetailInfo.isCloseDetail = false;
          }
          // 上传人信息默认填写项
          if (tempUploadPeopleInfo) {
            this.formData.uploadName = tempUploadPeopleInfo.uploaderName;
            this.formData.uploadPhone = tempUploadPeopleInfo.uploaderMobile;
            this.formData.uploadEmail = tempUploadPeopleInfo.uploaderEmail;
          }
          this.needsUpdater = tempDetailInfo.needsUpdater; // 需求接收人
          // 已上传简历列表
          let len = tempUploadInfos.length;
          let tempItem = {};
          let endTempObj = {};
          if (len <= 0) {
            return;
          }
          this.endUploadList = [];
          for (let i = 0; i < len; i++) {
            tempItem = tempUploadInfos[i];
            endTempObj = {
              name: tempItem.surname, // 姓名
              record: tempItem.education_code, // 学历
              workLife: tempItem.work_experience, // 工作年限
              jobStatus: tempItem.current_status_code, // 在离职状态
              inJobTime: tempItem.post_time, // 到岗时间
              phone: tempItem.telephone, // 联系电话
              uploadTime: tempItem.create_date, // 上传时间
              id: tempItem.telephone,
              zz: tempItem.file_url,
              cvdbId: tempItem.cvdbId,
            };
            this.endUploadList.push(endTempObj);
          }
        }
      });
    },
    // 对说明数据进行解构
    desc_details: function (val) {
      let tempVal = [];
      if (val) {
        if (val.indexOf("\n") !== -1) {
          tempVal = val.split("\n");
        } else {
          tempVal.push(val);
        }
      } else {
        tempVal = [];
      }
      return tempVal;
    },
    // 工作城市
    showAllCityBox() {
      bus.$emit("show-city-box");
    },
    // 获取城市名称
    getCityName(citys) {
      if (citys) {
        let tempCity = {},
          tempCitys = [],
          tempCityCode = [];
        for (let i = 0; i < citys.length; i++) {
          tempCity = citys[i];
          tempCitys.push(tempCity.lable);
          tempCityCode.push(tempCity.coded);
        }
        this.formData.city = tempCitys.join(",");
        this.formData.cityCode = tempCityCode.join(",");
        console.log(this.formData);
      }
    },
    handlePictureCardPreview(file) {
      let tempUrl = this.formData.uploadFileUrl;
      console.log("预览的路径:", this.formData);
      showOrDownFile({ zz: tempUrl }, "show", "1");
      this.dialogImageUrl = file.url;
      this.fileDialogVisible = true;
    },
    downFile(url, name) {
      let self = this;
      this.downUrl = url;
      console.log("下载的路径:", url);
      this.downFileName = name;
      console.log(this.downFileName, this.downUrl);
      window.setTimeout(function () {
        self.$refs.downBtn.click();
      }, 300);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      const url = file.realUrl
      removeFile({ name: url }).then(res => {
        console.log(res)
      })
      this.fileList = [];
      this.formData.uploadFileUrl = "";
    },
    uploadError() {
      this._showMessage("error", "上传文件出错,请重新刷新页面再试!");
    },
    showResumeUploadForm() {
      fetchEducatInfo(this.$store, { parentId: "educat" }).then(() => {
        let tempObj = this.getSelectMapDataTemp;
        if (tempObj.state === "0000") {
          let tempData = this.mapTempData.data;
          let len = tempData.length;
          let tempItem = {};
          let endTempItem = {};
          this.educatInfo = [];
          for (let i = 0; i < len; i++) {
            tempItem = tempData[i];
            endTempItem = {
              label: tempItem.lable,
              value: tempItem.coded,
            };
            this.educatInfo.push(endTempItem);
          }
        }
        this.isShowResumeForm = true;
      });
    },
    beforeAvatarUpload(file) {
      let isPdf =
        file.type === "application/pdf" || file.name.indexOf(".pdf") !== -1;

      if (!isPdf) {
        this._showMessage("error", "只能上传PDF格式文件！");
      }

      return isPdf;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

    savedResumeInfo(formName) {
      let self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("是否提交此简历信息?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            customClass: "d-message-box",
            confirmButtonClass: "mes-confir-btn",
            cancelButtonClass: "mes-cancel-btn",
          })
            .then(() => {
              this.isCan = true;
              this.formData.id = this.needId;
              this.formData.availableTime = formatDate(this.formData.inJboTime);
              if (!this.formData.uploadFileUrl) {
                this._showMessage("error", "请上传简历!");
                this.isCan = false;
                return;
              }
              this.formData.needsUpdater = this.needsUpdater; // 需求接收人
              fetchSaveResumeInfo(this.$store, this.formData).then(() => {
                let tempObj = this.$store.getters.getSaveResumeInfo;
                if (tempObj.state === "0000") {
                  self.delResumeInfo();
                  this.getDemandDetail();
                  if (this.state === "1") {
                    this.isShowUploadResume = true;
                  }
                  this._showMessage("success", tempObj.message, function () {
                    //self.$router.push('/resume')
                  });
                } else {
                  this._showMessage("error", tempObj.message);
                  this.isCan = false;
                }
              });
            })
            .catch(() => {});
        } else {
          this.isCan = false;
          return false;
        }
      });
    },
    delResumeInfo() {
      this.isShowResumeForm = false;
      this.formData.candidate = "";
      this.formData.educational = "";
      this.formData.handsOn = "";
      this.formData.jobStatus = "";
      this.formData.availableTime = "";
      this.formData.reason = "";
      this.formData.candidatePhone = "";
      this.formData.uploadFileUrl = "";
      this.isCan = false;
      this.fileList = [];
      this.isShowUploadFileBox = false;
      this.$refs["formData"].resetFields();
    },
    selectUploadFile(file, fileList) {
      let stus = file.status;
      if (stus === "ready") {
        this.isShowUploadFileBox = true;
        let size = file.size / 1024 / 1024;
        this.fileObj.size = Math.ceil(size) + "MB";
        this.fileObj.name = file.name;
        this.isShowNameBox = true;
      }
    },
    uploadProgress(event, file, fileList) {
      this.isShowPropessBox = true;
      this.prssWidth = Math.ceil(event.percent);
    },
    uploadFileError(err, file, fileList) {
      this.uploadFileSta = false;
      this.isShowUploadStateBox = true;
      this.uploadFileStateText = "上传失败";
      this.uploadFileStateClass = "error";
    },
    uploadSuccess(res, file, fileList) {
      console.log("上传成功路径：" + res.data);
      console.log(fileList);
      if (res.data) {
        this.formData.uploadFileUrl = res.data;
      }
    },

    showPDFImgDialog(row, type, isSave, fileType) {
      //预览文件
      showOrDownFile(row, type, isSave);
    },
    beforUploadFile(file) {
      this.isShowUploadFileBox = true;
      let size = file.size / 1024 / 1024;
      this.fileObj.size = Math.ceil(size) + "MB";
      this.fileObj.name = file.name;
      this.isShowNameBox = true;
    },
    selectFile() {
      _j(".showWindowPup").click();
    },
    _showMessage(type, msg, fn) {
      this.$message({
        showClose: false,
        message: msg,
        type: type,
        onClose: function () {
          if (fn instanceof Function) {
            fn && fn();
          }
        },
      });
    },
  },
};
</script>
<style lang="scss">
@import "./../assets/scss/didi-variable.scss";
@import "./../assets/scss/res-element.scss";
@include resBreadcrumbBox;

.upload-box {
  margin-bottom: 20px;
  .btn-box {
  }
  .upload-btn-box {
    text-align: left;
  }
  .save-btn-box {
    text-align: right;
    .save-md-btn {
      float: right;
    }
  }
  .upload-info-box {
    border: 1px solid #ededed;
    margin-top: 20px;
  }
  .upload-mode-title {
    height: 40px;
    line-height: 40px;
    background-color: #f9fbfd;
    border-bottom: 1px solid #ededed;
    margin-bottom: 20px;
    .resume-detailtitle-box {
      text-align: left;
      padding-left: 20px;
    }
    .title-icon {
      color: #ffc177;
      vertical-align: middle;
    }
    .title-txt {
      font-size: 14px;
      font-weight: bold;
      color: #555555;
    }
    .feture-box {
      text-align: right;
      padding-right: 20px;
    }
    .fetu-item {
      cursor: pointer;
      .fetu-icon {
        font-size: 14px;
        color: #b0b0b0;
      }
      .fetu-txt {
        font-size: 14px;
        color: #b0b0b0;
      }
    }
    .fetu-item:hover {
      .fetu-icon {
        color: #fa8919;
      }
      .fetu-txt {
        color: #636363;
      }
    }
    /* .fetu-item:first-child {
      margin-right: 25px;
    } */
  }
  .upload-form-box {
    border: none;
    height: auto;
    overflow: hidden;
    padding-bottom: 20px;
    .el-form-item {
      margin-left: 3.5%;
      width: 100%;
    }
    .inp-textarea {
      width: 99%;
      .el-form-item__content {
        .el-textarea {
          .el-textarea__inner {
            height: 54px\0;
            min-height: 51px\0;
          }
        }
      }
    }
  }
}

.upload-container {
  border: 1px solid #ededed;
  border-top: none;
  text-align: left;
  height: 60px;
  position: relative;
  .file-info-box {
    width: 80%;
    vertical-align: middle;
    display: inline-block;
    span {
      display: inline-block;
      width: 100%;
      height: 22px;
      line-height: 22px;
      font-size: 12px;
    }
    .file-name-txt {
      color: #3a3a3a;
    }
    .file-size {
      color: #888;
    }
  }
  .file-icon {
    width: 12%;
    vertical-align: middle;
    font-size: 26px;
    color: #00c57d;
    height: 60px;
    line-height: 60px;
    margin-left: 5.5%;
  }
  .close-icon {
    position: absolute;
    right: 3px;
    top: 2px;
    font-size: 13px;
    color: #555555; //background: #dbdbdb;
    display: none;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 17px;
    border-radius: 50%;
    cursor: pointer;
  }
}

.upload-container:hover {
  .close-icon.error,
  .close-icon.ready {
    display: inline-block;
  }
}

.propess-box {
  width: 100%;
  height: 37px;
  padding-top: 23px;
  .pess-time,
  .pess-size {
    width: 18%;
    display: inline-block;
    font-size: 14px;
  }
  .pess-time {
    text-align: right;
  }
  .pess-box {
    display: inline-block;
    width: 43%;
    border: 1px solid #ccc;
    height: 12px;
    border-radius: 10px;
    position: relative;
    vertical-align: middle;
  }
  .perr-box {
    position: absolute;
    left: 1%;
    top: -3px;
    width: 98%;
    height: 10px;
    border-radius: 8px;
    display: inline-block;
  }
  .perr {
    width: 0%;
    background: #00c57d;
    display: inline-block;
    height: 10px;
    border-radius: 8px;
  }
  .pess-size {
    text-align: left;
  }
}

.upload-status-box {
  height: 60px;
  width: 60;
  text-align: right;
  padding-right: 20px;
  line-height: 60px;
  .upload-status-icon {
    font-size: 14px;
  }
  .upload-status-txt {
    font-size: 14px;
    color: #888;
  }
  .upload-status-icon.success,
  .upload-status-txt.success {
    color: #00c57d;
  }
  .upload-status-icon.error,
  .upload-status-txt.error {
    color: #e20a0a;
  }
}

.upload-main-box {
  text-align: left;
  .showWindowPup {
    display: none;
  }
  .el-upload-list__item-name {
    display: none;
  }
}

.end-upload-list {
  margin-bottom: 20px;
}

@include resTable;
@include resInputCss;
@include resButton;
@include resMessageBox;
.table-box {
  .resume-txt {
    color: $main-color;
    font-size: 14px;
  }
  .resume-txt:hover {
    color: $main-hover-color;
  }
  .look-icon {
    margin-right: 5px;
  }
  .down-icon {
    margin-left: 5px;
  }
}

.resume-uplaod-box {
  text-align: left;
  .el-upload-list {
    width: 100%;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 40px;
    border-radius: 0px;
  }
  .el-upload--picture-card {
    width: 70px;
    height: 40px;
    line-height: 40px;
    border-radius: 0px;
    i {
      font-size: 15px;
      color: #8c939d;
      font-weight: bold;
    }
  }
  .el-icon-close {
    display: none;
  }
  .el-icon-close-tip {
    display: none;
  }
}

.star-box {
  .el-form-item {
    .el-form-item__label::before {
      content: "*";
      color: #fa5555;
      margin-right: 4px;
    }
  }
}

.sub-form-items {
  display: inline-block;
  margin-left: 20px;
  padding-right: 20px;
  border-left: 4px solid #fc9153;
  font-size: 14px;
  font-weight: bold;
  color: #fc9153;
  width: 90%;
  text-indent: 10px;
  margin-bottom: 15px;
  height: 16px;
  line-height: 16px;
}
</style>
